<template>
  <div>
    <!-- <input type="text" :value="msg" @input="fn"> -->
    <!-- msg变量传给Child的value属性(props) -->
    <Child v-model="msg"></Child>
    外面{{msg}}
  </div>
</template>

<script>
import Child from './Child'
export default {
  data () {
    return {
      msg: '123'
    }
  },
  components: {
    Child
  }
  // v-model的作用：
  // 1.给当前标签添加value属性
  // 2.给当前标签添加@input事件，还会把事件接收到的值给对应变量

  // 扩展：
  // 如果传给子组件的变量是：
  // 基础类型：v-model双向绑定(遵守单项数据流)
  // 引用类型：传进去，互相影响。
  //          细节：不要违反单项数据流
  //          口诀：数据是谁的，谁改
  //          原因：如果把这个引用类型传给孩子，有一个孩子改变，其他孩子同步了(不知道是谁改的...)

  // 优化项目：不违背单项数据流：
  // 频道在index.vue中(用户频道，所选频道，不选频道)；应该在新增或删除时，要传回来一个动作(因为这个数据是爸爸的，数据是谁的谁改)
}
</script>

<style>

</style>
